<template>
    <div class="myseed">
         <div class="seed-logo">
             <img src="../../assets/img/xiaochong.png" alt="">
         </div>
         <div class="seed-con">
             <!-- <div class="matter">
                 <span>口碑素材</span>
                 <span>图版那还好是当是的哈哈很好</span>
             </div>
             <div class="matter">
                 <span>口碑素材</span>
                 <span>图版那还好是当</span>
             </div> -->
            <van-swipe :autoplay="3000" indicator-color="white" style="height: 280px;" vertical>
                <van-swipe-item>
                     <div class="matter">
                     <span>口碑素材</span>
                     <span>必入水乳</span>
                     </div>
                    <div class="matter">
                    <span>口碑素材</span>
                    <span>cemoy新品蓝闺蜜水乳</span>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="matter">
                    <span>口碑素材</span>
                    <span>享誉新西兰</span>
                    </div>
                    <div class="matter">
                    <span>口碑素材</span>
                    <span>腰间颈椎服用...</span>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="matter">
                    <span>口碑素材</span>
                    <span>新品蓝闺蜜水乳大爱</span>
                    </div>
                    <div class="matter">
                    <span>口碑素材</span>
                    <span>收到它们好开心</span>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="matter">
                    <span>口碑素材</span>
                    <span>海优键 全面关节护胶囊</span>
                    </div>
                    <div class="matter">
                    <span>口碑素材</span>
                    <span>CEMOY闺蜜水乳</span>
                    </div>
                </van-swipe-item>
            </van-swipe>
         </div>
    </div>
</template>


<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);

export default {
    
}
</script>

<style lang="less">
@import '../../assets/css/reset.css';
@import '../../assets/less/variable.less';

.myseed{
    width: 365px;
    height: 70px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 10px;
    display: flex;
    overflow: hidden;
    .seed-logo{
        width: 60px;
        height: 60px;
        margin-left: 10px;
        margin-top: 5px;
        border-right: 1px solid #f0f0f0;
        img{
            width: 100px;
            height: 100px;
            margin-left: -22px;
            margin-top: -15px;
        }
    }
}

.seed-con{
    width: 100%;
    .matter{
        margin-top: 3px;
        span{
            margin-left: 10px;
            font-weight: bold;
            &:first-child{
                width: 60px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                font-size: 13px;
                border-radius: (30px /2);
                display: inline-block;
                border: 3px solid #c06cd0;
                color: #c06cd0;
            }
            &:last-child{
                width: 200px;
                height: 20px;
                line-height: 20px;
                vertical-align: middle;
                display: inline-block;
                color: #747474;
                overflow: hidden;
                font-size: 15px;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}

</style>